<template>
    <div class="info-root" ref="infoRootDom">

        <div class="content" v-if="curData">
            <div class="info box">
                <div class="info-content">
                    <div class="left">
                        <div class="item-image" :style="'background-image: url(' + curData.backImage + ');'"></div>
                    </div>
                    <div class="right">
                        <span>{{ curData.name }}</span>
                        <span style="margin-left: 5px;" v-for="(item, index) in curData.category.split(',')"
                            :key="index">{{ item }}</span>
                    </div>
                </div>
            </div>
            <div class="tags box" ref="tagsDom" style="height: 0px;">
                <myTagContent :curData="curData.tags" @heightChange="tag_HChangeEvent" @change="tag_ChangeEvent">
                </myTagContent>
            </div>
            <div class="files box" ref="filesDom" style="height: 0px;">
                <myFileContent :curData="curData.files" @heightChange="file_HChangeEvent"></myFileContent>
            </div>
        </div>

    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { getNovelInfo_API } from "@/axios/api/novel.js";
import { addTag_API } from "@/axios/api/tag.js";
import myTagContent from '@/components/info/tagList.vue';
import myFileContent from '@/components/info/fileList.vue';


const curData = ref(null);
const infoRootDom = ref();

onMounted(() => {
    const id = router.currentRoute.value.query.id;
    getNovelData(id);
});

//#region tagEvent
const tagsDom = ref();
const tag_HChangeEvent = (h) => {
    tagsDom.value.setAttribute('style', `height:${h}px`);
}
const tag_ChangeEvent = (data) => {
    const { add, del, success, error } = data;
    addTag_API({
        id: curData.value.id,
        type: 1,
        tagAddIds: add.toString(),
        tagDelIds: del.toString(),
    }).then(res => {
        if (res.statusCode == 0)
            success(res.result);
        else
            error(res);
    }).catch(res => {
        error(res);
    })
}
const filesDom = ref();
const file_HChangeEvent = (h) => {
    filesDom.value.setAttribute('style', `height:${h}px`);
}
//#endregion

const getNovelData = (id) => {
    getNovelInfo_API({
        id: id,
    }).then(res => {
        if (res.statusCode == 0) {
            console.log(res.result);
            curData.value = res.result;
            curData.value.backImage += `${res.result.name}/image.jpg`;
        }
    })
}

</script>

<style scoped lang="scss">
.info-root {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-image: url('$/images/00.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    .content {
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding-bottom: 10px;
        height: auto;

        .box {
            border-radius: 7px;
            overflow: hidden;
            position: relative;
            margin-top: 10px;
        }

        .box::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background-image: url('$/images/00.jpg');
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
            filter: blur(5px);
            position: absolute;
            top: 0;
            left: 0;
        }

        .info {
            height: 270px;

            .info-content {
                position: absolute;
                top: 0;
                font-weight: 900;
                color: rgb(66, 66, 66);
                display: flex;
                height: 100%;
                width: 100%;
                background: rgba(255, 255, 255, 0.6);

                .left {
                    width: 190px;
                    height: calc(100% - 10px);
                    padding: 5px;
                    margin-left: 5px;

                    .item-image {
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                        background-size: cover;
                        background-position: center;
                    }
                }

                .right {
                    margin-left: 20px;

                    >span {
                        display: block;
                        padding: 5px 0;
                    }
                }
            }
        }

        .tags,
        .files {
            transition-duration: 0.3s;

            >div {
                background: rgba(255, 255, 255, 0.6);
                width: 100%;
            }
        }
    }


}
</style>